<!-- app/templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ vim.name }}</title>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>{{ vim.name }}</h1>
        </header>

        <!-- 显示错误信息 -->
        {% if request.query_params.get('error') %}
          <div style="color: red;">
              Error: {{ request.query_params['error'] }}
          </div>
        {% endif %}
        
        <table>
            <thead>
              <tr>
                <th>CPU Resource Max</th>
                <th>Ram Resource Max</th>
                <th>Rom Resource Max</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{ vim.cpuMax }}</td>
                <td>{{ vim.ramMax }}</td>
                <td>{{ vim.romMax }}</td>
              </tr>
            </tbody>
        </table>

        <form action="{{ request.url_for('main.add_vnf') }}" method="post">
            <label for="vnfname">vnfname:</label>
            <input type="text" id="vnfname" name="vnfname" required>

            <label for="vnftype">vnftype:</label>
            <input type="text" id="vnftype" name="vnftype" required>

            <label for="vnfip">vnfip:</label>
            <input type="text" id="vnfip" name="vnfip" required>

            <label for="vnfport">vnfport:</label>
            <input type="text" id="vnfport" name="vnfport" required>

            <label for="vnfcpu">vnfcpu:</label>
            <input type="text" id="vnfcpu" name="vnfcpu" required>

            <label for="vnfram">vnfram:</label>
            <input type="text" id="vnfram" name="vnfram" required>            

            <label for="vnfrom">vnfrom:</label>
            <input type="text" id="vnfrom" name="vnfrom" required>

            <button type="submit">Add VNF</button>
        </form>
        
        <ul>
            {% for vnf in vnfs %}
                <li>
                    <table class="vnf-table">
                        <tbody>
                          <tr>
                            <td>Name: {{ vnf.name }}</td>
                            <td>Type: {{ vnf.type }}</td>
                            <td>Ip: {{ vnf.ip }}</td>
                            <td>Port: {{ vnf.port }}</td>
                            <td>Cpu: {{ vnf.cpu }}</td>
                            <td>Ram: {{ vnf.ram }}</td>
                            <td>Rom: {{ vnf.rom }}</td>
                            <td>
                                <form action="{{ request.url_for('main.delete_vnf', vnf_name=vnf.name) }}" method="post" style="display:inline;">
                                    <button type="submit" onclick="return confirm('Are you sure you want to delete this vnf?')">Delete</button>
                                </form>
                            </td>
                          </tr>
                        </tbody>
                    </table>
                </li>
            {% endfor %}
        </ul>

        <table>
            <thead>
              <tr>
                <th>CPU Resource Remain</th>
                <th>Ram Resource Remain</th>
                <th>Rom Resource Remain</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{ vim.cpuRemain }}</td>
                <td>{{ vim.ramRemain }}</td>
                <td>{{ vim.romRemain }}</td>
              </tr>
            </tbody>
        </table>

    </div>
</body>
</html>